<template>
  <div class="HytReform">
    <div class="reformTit">
      <div class="item">
        <span class="blue" @click="videoShow(videoData.videoAll)">{{videoData.videoAll.name}} <i class="iconfont icon-paishe-"></i></span>
      </div>
    </div>
    <div class="reformCont">
      <div class="item">
        <div class="box blue">
          <p class="tit" v-for="item in videoData.videoList" :key="item.id">
            <span @click="videoShow(item)">{{ item.name }}<i class="iconfont icon-paishe-"></i> </span>
          </p>
        </div>
      </div>
    </div>
    <a-modal v-model="videoVisible" width="80%" :bodyStyle="{padding: 0}" :footer="null" :centered="true">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </a-modal>
  </div>
</template>

<script>
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  export default {
    name: 'HytVideo',
    components: { videoPlayer },
    data () {
      return {
        ossSrc: 'https://hyt.dongyang.gov.cn/hdFile/api/common/file/show/hyt_zf_app/',
        curVideoId: '',
        videoData: {
          videoAll: { id: '071f2fd4ee4d4e55911f2d7c3000ea8b', name: '影视文化大脑' },
          videoList: [
            { id: 'f0bbf9696f944624b74ec9e9062b12c6', name: '人才综合智治系统 (横影通)' },
            { id: '79ab03854ee04610878ad3eda65fc07a', name: '产业综合智治系统 (决策分析系统)' },
            { id: '820a4c7880ce4f9699dd2d88c87271bd', name: '剧组综合服务管理系统 (云勘景)' },
            { id: '2c2651cdf1174f2bbe25bb7a7e1acaae', name: '版权区块链交易系统' },
            { id: '5eb10536712b46c5b2f014d2f16ca33b', name: '服化道供应系统' },
            { id: 'e2b52d448989433b823b9ce14471d333', name: '企业服务管理系统 (政企通)' },
            { id: '547f0bfb228046c3a7316136e40e0795', name: '衍生品交易系统' },
            { id: '333496c2a8b8410ea23d07cf214579f5', name: '影视制作云' }
          ]
        },
        videoVisible: false
      }
    },
    mounted () {
    },
    computed: {
      playerOptions () {
        return {
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              src: `${this.ossSrc}${this.curVideoId}`, // 路径
              type: 'video/mp4' // 类型
            }
          ],
          // poster: "../../static/images/test.jpg", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          }
        }
      }
    },
    methods: {
      videoShow (data) {
        this.curVideoId = data.id
        this.videoVisible = true
      }
    }
  }
</script>

<style scoped lang="less">
  .reformTit {
    display: grid;
    grid-template-columns: 100%;
    font-size: 18px;
    font-weight: bold; margin-top: 15px; margin-bottom: 10px;
    span {
      display: flex;  justify-content: center; align-items: center; align-content: center;
      margin: 0 10px; padding: 15px 12px; border-radius: 5px; color: #fff;
      .iconfont { padding-left: 5px;}
    }
    .blue {background: #619bf3;}
  }
  .reformCont {
    display: grid;
    grid-template-columns: 100%;
    font-size: 18px; margin-top: 20px;
    .box {
      display: flex;  justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;
      padding: 15px 10px;border-radius: 8px; text-align: center; margin: 0 10px;
      height: 100%;
      p { display: block; width: 50%; padding: 10px 10px; margin-bottom: 0;
        span {  width: 100%; display: block; margin: auto; padding: 20px 12px; border-radius: 5px; cursor: pointer;
          .iconfont { padding-left: 5px;}
        }
      }
    }
    .blue {
      background: #f2f5fd; border: 1px dashed #c7dffd;
      span {background: #c7dffd; }
      .red{ color: red; margin-left: 5px;}
    }
    /*p.tit:nth-child(1) span { background: linear-gradient(to right, #E85894, #E85894); }*/
    div:nth-child(2) span { background: linear-gradient(to right, #a970e1, #a970e1); }
    div:nth-child(3) span { background: linear-gradient(to right, #6a92ed, #6a92ed); }
    div:nth-child(4) span { background: linear-gradient(to right, #6792ec, #6792ec); }
    div:nth-child(5) span { background: linear-gradient(to right, #e85895, #e85895); }
    div:nth-child(6) span { background: linear-gradient(to right, #ea7146, #ea7146); }
    div:nth-child(7) span { background: linear-gradient(to right, #ed9720, #ed9720); }
    div:nth-child(8) span { background: linear-gradient(to right, #61c1f8, #61c1f8); }
  }

  /deep/ .ant-modal {
    margin-bottom: 0;
    .ant-modal-close {
      top: 6px;
      right: 5px;
      color: rgb(255 255 255 / 1); width: 40px; height: 40px;
      background: rgba(0,0,0,.6); border-radius: 50%;
    }
    .ant-modal-close-x { width: 100%; height: 100%; line-height: 40px; font-size: 18px}
  }
  /deep/ .video-js .vjs-big-play-button{
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
</style>
